<script setup lang="ts">
import type { ILoginInfo } from '@/types'
import { ref } from 'vue'
import { useAuth } from '../../hooks/useAuth';

const username = ref('')
const password = ref('')

const onClickLeft = () => history.back()
const { login } = useAuth()
const onSubmit = async (data: ILoginInfo) => {
  await login(data)
  onClickLeft()
}
</script>

<template>
    <div class="login-page op-fullscreen">
        <VanNavBar title="请登录" left-text="返回" left-arrow @click-left="onClickLeft" />
        <VanForm class="login-page__form" @submit="onSubmit">
            <VanCellGroup inset>
                <VanField v-model="username" name="username" label="用户名" placeholder="用户名:admin"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <VanField v-model="password" name="password" label="密码" placeholder="密码:123456"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </VanCellGroup>
            <div style="margin: 16px">
                <VanButton round block type="primary" native-type="submit">提交</VanButton>
            </div>
        </VanForm>
    </div>
</template>

<style lang="scss" scoped>
.login-page {
    .login-page__form {
        margin-top: 100px;
    }
}
</style>